<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏排行榜 - Game Hub</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/leaderboard.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <header class="header">
        <nav class="nav-container">
            <div class="nav-left">
                <div class="logo">
                    <span class="logo-text">Game Hub</span>
                </div>
                <div class="nav-links">
                    <a href="index.html">首页</a>
                    <a href="leaderboard.html" class="active">排行榜</a>
                    <a href="#">新品推荐</a>
                    <a href="#">收藏夹</a>
                </div>
            </div>
            <div class="nav-right">
                <div class="search-container">
                    <input type="text" placeholder="搜索游戏...">
                    <button class="search-btn">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                            <path d="M21 21L16.5 16.5M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </button>
                </div>
                <button class="user-btn">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        <path d="M20 21C20 18.2386 16.4183 16 12 16C7.58172 16 4 18.2386 4 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </button>
            </div>
        </nav>
    </header>

    <main class="leaderboard">
        <div class="page-header">
            <h1 class="page-title">游戏排行榜</h1>
            <p class="page-subtitle">查看所有游戏的最高分和最佳玩家，挑战自我，创造新纪录！</p>
        </div>

        <div class="leaderboard-tabs">
            <button class="tab-button active">全部游戏</button>
            <button class="tab-button">动作游戏</button>
            <button class="tab-button">益智游戏</button>
            <button class="tab-button">策略游戏</button>
            <button class="tab-button">冒险游戏</button>
        </div>

        <div class="leaderboard-filters">
            <div class="filters-grid">
                <div class="filter-group">
                    <label class="filter-label">时间范围</label>
                    <select class="filter-select">
                        <option value="all-time">所有时间</option>
                        <option value="today">今天</option>
                        <option value="this-week">本周</option>
                        <option value="this-month">本月</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label class="filter-label">游戏类型</label>
                    <select class="filter-select">
                        <option value="all">所有类型</option>
                        <option value="action">动作</option>
                        <option value="puzzle">益智</option>
                        <option value="strategy">策略</option>
                        <option value="adventure">冒险</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label class="filter-label">排序方式</label>
                    <select class="filter-select">
                        <option value="score">最高分数</option>
                        <option value="recent">最近更新</option>
                        <option value="popular">最受欢迎</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="leaderboard-content">
            <!-- 游戏排行榜卡片 - 示例 1 -->
            <div class="game-leaderboard">
                <div class="leaderboard-header">
                    <h2 class="game-title">
                        <span class="game-icon">🎮</span>
                        太空冒险
                    </h2>
                </div>
                <div class="rankings-list">
                    <div class="ranking-item">
                        <span class="rank rank-1">1</span>
                        <div class="player-info">
                            <div class="player-avatar">
                                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=player1" alt="Player 1">
                            </div>
                            <span class="player-name">玩家一号</span>
                        </div>
                        <div class="score-details">
                            <span class="player-score">98,750</span>
                            <span class="score-date">2024-01-15</span>
                        </div>
                    </div>
                    <div class="ranking-item">
                        <span class="rank rank-2">2</span>
                        <div class="player-info">
                            <div class="player-avatar">
                                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=player2" alt="Player 2">
                            </div>
                            <span class="player-name">银河战士</span>
                        </div>
                        <div class="score-details">
                            <span class="player-score">95,200</span>
                            <span class="score-date">2024-01-14</span>
                        </div>
                    </div>
                    <div class="ranking-item">
                        <span class="rank rank-3">3</span>
                        <div class="player-info">
                            <div class="player-avatar">
                                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=player3" alt="Player 3">
                            </div>
                            <span class="player-name">星际领航员</span>
                        </div>
                        <div class="score-details">
                            <span class="player-score">92,150</span>
                            <span class="score-date">2024-01-13</span>
                        </div>
                    </div>
                </div>
                <a href="#" class="view-more">查看完整排行榜</a>
            </div>

            <!-- 游戏排行榜卡片 - 示例 2 -->
            <div class="game-leaderboard">
                <div class="leaderboard-header">
                    <h2 class="game-title">
                        <span class="game-icon">🧩</span>
                        方块消除
                    </h2>
                </div>
                <div class="rankings-list">
                    <div class="ranking-item">
                        <span class="rank rank-1">1</span>
                        <div class="player-info">
                            <div class="player-avatar">
                                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=player4" alt="Player 4">
                            </div>
                            <span class="player-name">方块大师</span>
                        </div>
                        <div class="score-details">
                            <span class="player-score">1,250,000</span>
                            <span class="score-date">2024-01-15</span>
                        </div>
                    </div>
                    <div class="ranking-item">
                        <span class="rank rank-2">2</span>
                        <div class="player-info">
                            <div class="player-avatar">
                                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=player5" alt="Player 5">
                            </div>
                            <span class="player-name">消除王者</span>
                        </div>
                        <div class="score-details">
                            <span class="player-score">1,180,500</span>
                            <span class="score-date">2024-01-14</span>
                        </div>
                    </div>
                    <div class="ranking-item">
                        <span class="rank rank-3">3</span>
                        <div class="player-info">
                            <div class="player-avatar">
                                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=player6" alt="Player 6">
                            </div>
                            <span class="player-name">拼图达人</span>
                        </div>
                        <div class="score-details">
                            <span class="player-score">1,150,750</span>
                            <span class="score-date">2024-01-13</span>
                        </div>
                    </div>
                </div>
                <a href="#" class="view-more">查看完整排行榜</a>
            </div>
        </div>
    </main>

    <footer class="footer">
        <div class="footer-content">
            <div class="footer-top">
                <div class="footer-brand">
                    <h3>Game Hub</h3>
                    <p>发现快乐，享受游戏</p>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>关于我们</h4>
                        <a href="#">公司介绍</a>
                        <a href="#">加入我们</a>
                        <a href="#">联系方式</a>
                    </div>
                    <div class="footer-column">
                        <h4>帮助支持</h4>
                        <a href="#">常见问题</a>
                        <a href="#">用户指南</a>
                        <a href="#">意见反馈</a>
                    </div>
                    <div class="footer-column">
                        <h4>关注我们</h4>
                        <div class="social-links">
                            <a href="#" class="social-link">微信</a>
                            <a href="#" class="social-link">微博</a>
                            <a href="#" class="social-link">抖音</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 Game Hub. All rights reserved.</p>
                <div class="footer-legal">
                    <a href="#">隐私政策</a>
                    <a href="#">用户协议</a>
                    <a href="#">免责声明</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="assets/js/leaderboard.js"></script>
</body>
</html>
